<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
        </div>
        <!--1.引入vue模块-->
        <script type="text/javascript" src="./vue.js"></script>
        <!--2.引入vue-router模块-->
        <script type="text/javascript" src="../npm/node_modules/vue-router/dist/vue-router.js"></script>
        <script type="text/javascript">
            //3.让vue对象使用VueRouter创建
            //Vue.use(VueRouter);

            var Login = {
                template: '' +
                    '<div>我是登录页面</div>'
            };

            var Register = {
                template: '' +
                    '<div>我是注册页面</div>'
            };

            //4.创建router对象
            var router = new VueRouter({
                //5.配置路由对象
                routes: [
                    //路由匹配的规则
                    {
                        path: "/login",
                        component: Login
                    },
                    {
                        path: "/register",
                        component: Register
                    }
                ]
            });

            //引入vue-router模块给咱们抛出来两个全局的组件router-link==>a to ==>
            //href router-view===>路由匹配组件的出口
            var App = {
                template: '' +
                    '<div>' +
                    '<router-link to="/login">登录页面</router-link>' +
                    '<router-link to="/register">注册页面</router-link>' +
                    '<router-view></router-view>' +
                    '</div>'
            };

            new Vue({
                // el: '#app',
                data() {
                    return {}
                },
                components: {
                    App
                },
                //6.交给vue实例化对象管理
                router,
                template: '<App/>'
            }).$mount('#app');
        </script>

    </body>
</html>